<template>
  <div id="app">
    <keep-alive :max="25" :include="includedComponents">
      <router-view ref="bodyBox" :key="$route.fullPath" class="bodyBox" />
    </keep-alive>
    <keep-alive :max="25">
      <router-view ref="bodyBox1" name="layout" class="bodyBox" />
    </keep-alive>
    <!-- 开发调试插件 -->
    <Vconsole />
  </div>
</template>

<script>
import Vconsole from '@/components/Common/Vconsole.vue'
import { mapGetters, mapState, mapMutations } from 'vuex'
export default {
  name: 'App',
  components: { Vconsole },
  computed: {
    ...mapGetters(['direction', 'includedComponents', 'excludedComponents']),
    ...mapState({
      route: state => state.route
    }),
    viewTransition() {
      if (!this.direction) return ''
      else if (this.$route.meta.isHome) {
        if (this.route.from && !this.route.from.meta.isHome) {
          return 'app-pop-out'
        }
        return ''
      } else if (this.$route.meta.isHome) return ''
      return 'app-pop-' + (this.direction === 'forward' ? 'in' : 'out')
    },
    showTabBar() {
      return this.$route.meta.showTabBar || false
    },
    title() {
      return '在App.vue中computed:title()中修改'
    },
    contentHeight() {
      if (this.showTabBar) {
        return 'calc(100% - 46px - 60px)'
      }
      return 'calc(100% - 46px)'
    }
  },
  watch: {
    $route(to, from) {
      let statusBarBgColor = (to.meta && to.meta.statusBarBgColor) || '#00C8B4'
      const isToTop = to.meta.isImmerse === true
      if (isToTop) {
        statusBarBgColor = '' // 吸顶状态栏背景色为空
      }
      let statusBarType = statusBarBgColor === '#FFFFFF' || statusBarBgColor === '#F5F6F7' ? 1 : 2
      if (to.meta.statusBarType === 2 || to.meta.statusBarType === 1) {
        statusBarType = to.meta.statusBarType
      }
      // 设置原生状态栏风格（字体色，背景色,是否吸顶）
      this.$nativeHandler('setupStatusBarStyle', {
        statusBarType, // 1: 黑色  2：白色
        isToTop, // 是否需要顶部距离(true:吸顶)
        statusBarBgColor // 状态栏颜色
      }).then(res => {
        this.$store.commit(
          'updateStatusBarHeight',
          res.statusBarHeight || 0
        )
      })
      // this.$nativeHandler('setStatusBarColor', { 'color': barColor })
      if (to.name === 'HomeIndex') {
        // 回到首页，清空所有路由缓存
        this.$removeAllRouterCache(this)
      }
    }
  },
  async created() {
    this.nativeHandlerApp()
    const userInfo = await this.$nativeHandler('getBaseInfo', '')
    this.UPDATE_USER_INFO(userInfo)
  },
  methods: {
    ...mapMutations(['UPDATE_USER_INFO']),
    headerTransition() {
      return this.direction === 'forward'
        ? 'header-fade-in-right'
        : 'header-fade-in-left'
    },
    pageBack() {
      // 跳转时带isHome=true参数，就可以立即返回原生
      if (this.$route.query.isHome) {
        this.backOrigin()
        return
      }
      switch (this.$route.path) {
        case '/':
          this.backOrigin()
          break
        default:
          this.$router ? this.$router.back() : this.backOrigin()
          break
      }
    },
    goHome() {
      this.$router.push('/')
    },
    backOrigin() {
      this.$nativeHandler('closeWeb', '')
    },
    nativeHandlerApp() {
      this.$nativeHandler('setStatusBarColor', { 'color': '#00C8B4' })
      this.$nativeHandler('isQuanUBase').then(res => {
        this.$store.state.app.isOnQuanUBase = res
      }).catch(err => {
        this.$store.state.app.isOnQuanUBase = false
        this.$toast.fail('请在全友统一移动应用平台中使用' + err)
        this.$router.push('/404')
      })
    }
  }
}
</script>
<style>
  #app {
    font-family: Source Han Sans, PingFangSC-Regular, "Avenir", Helvetica, Arial,
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  html,
  body {
    min-height: 100vh;
    width: 100vw;
    background: #F5F6F7;
    /* overflow-x: hidden; */
    -webkit-overflow-scrolling: touch;
  }

  * {
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    /* scroll-behavior: smooth */
  }
  img { -webkit-touch-callout: none !important; }
  /* 主界面动画 */
  .app-pop-out-enter-active,
  .app-pop-out-leave-active,
  .app-pop-in-enter-active,
  .app-pop-in-leave-active {
    will-change: transform;
    transition: all 180ms;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    perspective: 1000;
  }

  .app-pop-out-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  .app-pop-out-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .app-pop-in-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .app-pop-in-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  /* 其他 */
  .bodyBox {
    width: 100%;
    box-sizing: border-box;
  }
</style>
